@import 'article/article.less';

#articles
{
  font-family:"lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;;
  .nopublish_articles{
    .t{
      color:#333;
      line-height: 30px;
      font-size: 13px;
    }
    a{
      margin-right: 20px;
    }
  }
  .invite-user-dropdown{
      width:362px;
      border:1px solid #ddd;
      background: #fff;
      position: absolute;
      left:-25px;
      z-index: 10000;
      top:30px;

      li{
        list-style: none;
        line-height: 20px;
        font-size: 13px;
        padding:5px;
        cursor: pointer;
      }
      li:hover{
        background: @green;
        color: #fff;

      }
    }
  .editor-add{
    .editors{
      .editor{
      width:260px;
      float:left;
      border:1px solid #eee;
      background: #f7f7f7;
      padding:10px;
      margin-right: 10px;
      margin-bottom: 10px;
      .head-pic{
        float:left;
        width:50px;
        overflow:hidden;
        height:50px;
        border-radius: 60px;
        img{
          width:50px;
          height:50px;
          display: block;
          border-radius: 60px;
        }
      }
      .info{
        float:left;
        margin-left:10px;
        width:200px;
        .nick{
          font-size: 14px;
          color:#555;
          font-weight: bold;
        }
        .desc{
          color:#999;
          font-size: 12px;
          margin-top: 5px;
          line-height: 18px;
          height:35px;
          overflow: hidden;
        }
        .weibo{
          color:#555;
          font-size: 12px;
          margin-top: 5px;
        }
      }
    }
    }
    .add-editor{
      margin-top: 20px;
      form{margin:0;}
      position: relative;
      
      input{
        vertical-align: top;
      }
      button{
        vertical-align: top;
      }
    }
  }
  .right-actions{
    float:right;
  }
  .topactions{
    margin-bottom: 10px;
  }
  .my-columns{
    a{
      margin-left: 10px;
      color:@red;
    }
  }
  .actions{
    margin-bottom: 10px;
    a{
      margin-right: 5px;
    }
  }
  .jian{
    .t{
      .more{
        font-size: 12px;
        padding-left: 10px;
        color: @green;
      }
    }
    .lft{
      float: left;
      width: 33%;
    }
    .rht{
      float: left;
      width: 33%;
    }
    .thr{
      float: left;
      width: 33%;
    }
    .item{
      // width:470px;
      // display: inline-block;
      // _float:left;
      background: #fff;
      position: relative;
    // border-bottom:1px solid #f1f1f1;
    vertical-align: top;
    padding-top:5px;
    padding-bottom: 5px;
    overflow: hidden;
    .title{
      line-height: 25px;
      margin:0;
      height:25px;
      overflow: hidden;
      font-size:14px;
      line-height: 25px;
      font-weight: normal;
      display: block;
      color:#444;
      a{
        color: #444;

      }
    }
    .desc{
      font-size: 12px;
      color:#999;
      line-height: 20px;
      .user{
        margin-right: 10px;
        color:#999;
      }
      .time{
        margin-right: 10px;
      }
      .column{
        margin-right: 10px;
        color:#999;
      }
      .desc-item{
        font-size: 12px;
        margin-right: 10px;
        .index{
          color:#aaa;
          font-size: 12px;
          i{
            background: none;
            vertical-align: -2px;
          }
          margin-right: 3px;
        }
        .value{
          color:#999;
        }
      }
    }
  }
  .item.yooo{
    background: #F7F7F7;
  }
  .item.new{
    .title{
      color:#5bb793;
      font-weight:bold;
    }
  }
}
.columns-list{
  .bd{
    width:1100px;
  }

  .column{
    padding:5px 0;
    border-top: 1px solid #eee;
    width:300px;
    margin-right: 20px;
    display: inline-block;
    vertical-align: top;
    .title{
      font-size: 13px;
      color:#444;
      line-height: 20px;
      font-weight: bold;
    }
    .desc{
      font-size: 12px;
      line-height: 18px;
      color:#aaa;
      margin:5px 0;
    }
    .user{
      font-size: 12px;
      line-height: 20px;
      color:#999;
      a{
        color:#999;
      }
    }
    .time{
      color:#999;
    }
    .actions{
      margin-bottom: 0;
      margin-top: 5px;
      a{
        font-size: 12px;
        color:@green;
        padding:5px 0;
        i:before{
          color:@green;
          font-size: 14px;
        }
      }
      span{
        color:#aaa;
        i:before{
          font-size: 14px;
          color: #aaa;
        }
      }
    }
  }
}
.my_columns{

  .my_column{
    margin-right: 10px;
    display: inline-block;
    margin-bottom: 5px;
    background: #eee;
    padding:0 10px;
    line-height: 30px;
    border-radius: 3px;
    height:30px;
    width:120px;
    overflow: hidden;
    vertical-align: top;
    .title{
      font-size: 12px;
      color:#777;
      line-height: 30px;
      overflow: hidden;
      a{
        color:#666;
      }
      .go{
        color: @green;
      }
    }

  }
  .my_column:hover{
    background: #ddd;
  }
}

.column{
  background: #fff;
  color:#333;
  padding:15px;
  border-radius: 3px;
  margin-bottom: 10px;
  .col-title{
    font-size: 16px;
    color:#666;
    font-weight: bold;
    line-height:30px;
  }
  .col-desc{
    color:#999;
    font-size: 12px;
  }
  .col-user{
    color:#999;
    font-size: 12px;
  }
  .col-action{
    margin-top: 10px;
  }

}
.col-rss{
  margin-top:10px;
  padding:10px;
  background: #eee;
  .label{
    background: #faecd0;
    color: #777;
    font-weight: normal;
    padding:5px;
  }
}
.no{
  padding:0px;
  line-height: 30px;
  font-size: 12px;
}




}

#add-article{
  background: #efefef;
  .left{
  }
  .right{
    position: relative;
    a{
      color:#6fb79b;
    }
    .item{
      border-bottom: 1px solid #eee;
      padding:5px 0;
    }
  }
  #title,#desc{
    width:630px;
  }
  #desc{
    height:50px;
  }
  .wmd-input{
    height:600px;
  }
  .columns{
    .bd{
      padding-top:10px;
    }
    .label{
      margin-right: 5px;
      float:left;
      cursor: pointer;
      margin-bottom: 5px;
    }
  }
}

#articles{
  .articles{
    width:110%;
  }
  article{
    width:240px;
    float:left;
    margin-right:15px;
    position: relative;
    border-bottom:1px solid #f1f1f1;
    margin-top:20px;
    height:250px;
    overflow: hidden;
    .entry-title:hover{
//      text-decoration: none;
//      .pic{
//        border:7px solid #fafafa;
//        box-shadow: 1px 1px 1px #aaa;
//      }
//

      -webkit-transform: translateZ(-84px) rotateX(90deg);
      -moz-transform: translateZ(-84px) rotateX(90deg);
      -ms-transform: translateZ(-84px) rotateX(90deg);
      -o-transform: translateZ(-84px) rotateX(90deg);
      transform: translateZ(-84px) rotateX(90deg);
      .cover-pic,.pic{
        border-radius: 8px;
      }
    }
    .title-wrapper{
      -webkit-perspective: 5000px;
     -moz-perspective: 5000px;
      -ms-perspective: 5000px;
      -o-perspective: 5000px;
      perspective: 5000px;
      display: inline-block;
      vertical-align: top;
      position: relative;
      width:100%;
      height:168px;
    }
    .entry-title{
      display: block;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transition: -webkit-transform .8s;
      -moz-transition: -moz-transform .8s;
      -ms-transition: -ms-transform .8s;
      -o-transition: -o-transform .8s;
      transition: transform .8s;
//      -webkit-transform: translateZ(0px) rotateX(95deg);
//      -moz-transform: translateZ(-84px) rotateX(95deg);
//      -ms-transform: translateZ(-84px) rotateX(95deg);
//      -o-transform: translateZ(-84px) rotateX(95deg);
//      transform: translateZ(0px) rotateX(95deg);
      height:168px;
      .pic{
        width:100%;
        height:168px;
        box-sizing: border-box;
        border:7px solid #fff;
        box-shadow: 1px 1px 1px #ccc;

        .img{
          width:100%;
          height:100%;
          border:1px solid #eee;
          box-sizing: border-box;
        }
        position: absolute;
        top:0;
        -webkit-transform: translateZ(84px);
        -moz-transform: translateZ(84px);
        -ms-transform: translateZ(84px);
        -o-transform: translateZ(84px);
        transform: translateZ(84px);
        -webkit-transition: all .8s;
        -moz-transition: all .8s;
        -ms-transition: all .8s;
        -o-transition: all .8s;
        transition: all .8s;
      }
      .text{
        display:-webkit-box;
        -webkit-box-orient:horizontal;
        -webkit-box-pack:center;
        -webkit-box-align:center;
        padding:10px;
        width:100%;
        box-sizing: border-box;
        height:168px;
      }
      .cover-pic{
        position: absolute;
        top:0;
        display:-webkit-box;
        -webkit-box-orient:horizontal;
        -webkit-box-pack:center;
        -webkit-box-align:center;
        width:100%;
        height:168px;
        box-sizing: border-box;
        padding:10px;
        overflow: hidden;
        background: #333;
        color:#fff;
        .t{
          color:#fff;
          font-size: 18px;
        }
        -webkit-transform: rotateX(-90deg) translateZ(84px);
        -moz-transform: rotateX(-90deg) translateZ(84px);
        -ms-transform: rotateX(-90deg) translateZ(84px);
        -o-transform: rotateX(-90deg) translateZ(84px);
        transform: rotateX(-90deg) translateZ(84px);
        -webkit-transition: all .8s;
        -moz-transition: all .8s;
        -ms-transition: all .8s;
        -o-transition: all .8s;
        transition: all .8s;
      }
      .real-t{

      }
      .t{
        font-size: 16px;
        line-height: 30px;
        text-align: center;
        color:#fff;
      }
      margin:0;
      font-size:15px;
      line-height: 35px;
      font-weight: normal;
      color:#666;


    }
    .t-tip{
      font-style: normal;
      font-size: 16px;
      color:#fff;
      background: rgba(80,167,222,0.5);
      display: block;
      width:40px;
      height:40px;
      line-height:40px;
      text-align: center;
      font-family: "STXihei";
      border-radius: 40px;
      vertical-align: 1px;
      position: absolute;left:100px;top:60px;
      display: none;
    }
    .real-t{
      color: #666;
      margin-top:10px;
      display: block;
      height:35px;
      overflow: hidden;
      font-size: 12px;
      overflow: hidden;
    }
    .column-title{
      font-size: 12px;
      padding:0 2px;
      color:#888;
    }
    .entry-foot{

      .other-r{float:right;
      margin-top:-27px;}
      .right-foot{
        float: right;
        .item{
        }
      }
      .username{
        margin-left:5px;
        color:#999;
        font-size: 12px;
        line-height:26px;
      }
      .item{
        display: inline-block;
        font-size: 12px;
        line-height: 25px;

        margin-left: 10px;
        i{
          background: none;
          margin-right: 1px;
          vertical-align: -2px;
        }
        i:before{
          color: #aaa;
          background: none;
        }
        a{
          color:#aaa;
        }
        .index{

        }
        .value{

        }
      }
    }
    .user{
      position: relative;
      width:25px;
      height:25px;
      vertical-align: top;
      display: inline-block;

      a{
        display: block;
      }
      img{
        width:20px;
        height:20px;
        border-radius: 33px;
        border:2px solid #fff;
        box-shadow: 1px 1px 1px #aaa;
      }
    }
  }


  .columns{
    width:1200px;
    .column{
      display:inline-block;
      vertical-align: top;
      margin-right: 10px;
      margin-bottom:10px;
        // background: #f3f3f3;
        border-bottom: 1px solid #efefef;
        width:495px;
        height:462px;
        padding:0;
        .h{
          padding:10px;
          padding-bottom: 5px;
        }
        position: relative;
      }
      a.title{
        font-size: 16px;
        color:#444;
        display: inline-block;
        vertical-align:top;

        line-height: 20px;
        
        margin-top: 4px;
      }
      .desc{
        font-size: 12px;
        color:#aaa;
        line-height: 20px;
        margin-top:5px;
        height:40px;
      }
      .user{
        font-size: 12px;
        color:#999;
        a{

        }
        line-height: 20px;
        margin-top:5px;
      }
      .time{
        font-size: 12px;
        color:#999;
        line-height: 20px;
      }
      .actions{
        margin-bottom: 0;

        a{
          font-size: 12px;
          line-height: 20px;
          color: @green;
          i:before{
            color: @green;
          }
        }
        span{
          font-size: 12px;
          line-height: 20px;
          color: #aaa;
          i:before{
            color: #aaa;
          }
        }
      }
      
      .more{
        line-height: 30px;
        padding-left:10px;
        background: #fff;
        position: absolute;
        bottom: 0;
        a{
          color:#666;
          font-size: 12px;

        }
      }
    }

  }

